<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="viewport" id="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi" >
<title>PANDORA潘多拉珠宝</title>
<link rel="stylesheet" href="css/m.css">
<link rel="stylesheet" href="css/swiper.min.css">
<style type="text/css">
	html, body{overflow: auto;}
	.wrap{overflow: auto;}
	.bg{display: block; padding: 0; margin: 0;}
</style>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-84291185-12"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-84291185-12');
</script>

</head>
<body>

<div id="loading" class="loading">
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
</div>

<div class="wrap" id="wrap">
	<img src="" class="bg" />
	<div class="change_tips white"></div>
	<div class="change_tips_hand white"></div>
	<a href="javascript:void(0)" class="btn_create white"></a>
</div>
</body>
</html>


<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
	var hurl = "http://pandora-2018xmas.shjiaoai.com/";//测试
	var isLoaded = false;
	//获取url中的参数
	function getUrlParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg);  //匹配目标参数
		if (r != null) return unescape(r[2]); return null; //返回参数值
	}
	var picsArr = new Array(),bgIDArr = new Array();
	var id = getUrlParam("id");
	$.ajax({
        type: "Post",
        url: hurl+"/interface/api.aspx?r=" + Math.random(),
        data: {
            "type": "result",
            "id": id
        },
        dataType: "json",
        async: false,
        beforeSend: function (XMLHttpRequest) { },
        success: function (data, textStatus) {
        	//console.log(JSON.stringify(data));
        	var bgId = data.bgId;
			var odata = data.top50;
			for(var i=0;i<odata.length;i++){
				picsArr.push(odata[i].picurl);
				bgIDArr.push(odata[i].bgID);
			}
			var image = picsArr[0];
			if(data.bgID==1 || data.bgID==2){
				$(".change_tips,.change_tips_hand,.btn_create").removeClass("white").addClass("black");
			}else{
				$(".change_tips,.change_tips_hand,.btn_create").removeClass("black").addClass("white");
			}

        	$('.bg').attr('src', data.picurl);
        	var img = new Image();
        	img.src = data.picurl;
        	img.onload = function(){
        		$('.loading').fadeOut();
        		isLoaded = true;
        	}
        }
    });


    var shake = false;
	function onShake(){
		if (window.DeviceMotionEvent) {
	    	window.addEventListener('devicemotion',deviceMotionHandler,false);
		}
		//获取加速度信息
		//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
		//而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
		var SHAKE_THRESHOLD = 20000;
		var last_update = 0;
		var x, y, z, last_x = 0, last_y = 0, last_z = 0;
		function deviceMotionHandler(eventData) {
		        var acceleration =eventData.accelerationIncludingGravity;
		        var curTime = new Date().getTime();
		        if ((curTime-last_update)> 10) {
		            var diffTime = curTime -last_update;
		            last_update = curTime;
		            x = acceleration.x;
		            y = acceleration.y;
		            z = acceleration.z;
		            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
		            if (speed > SHAKE_THRESHOLD) {
		            	if(shake==false){
		            		shake = true;
		                	if(isLoaded) changeBall();
		                	setTimeout(function(){ shake = false; }, 800);
		                }
		            }
		            last_x = x;
		            last_y = y;
		            last_z = z;
		        }
		}
	}

	onShake();

	/*
    //摇一摇
	if (window.DeviceMotionEvent){
		var speed = 25;
		var x = t = z = lastX = lastY = lastZ = 0;
		window.addEventListener('devicemotion',function(){
			var acceleration = event.accelerationIncludingGravity;
			x = acceleration.x;
			y = acceleration.y;
			if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
				if(isLoaded) changeBall();
			};
			lastX = x;
			lastY = y;
		},false);
	};
	*/


	//if(isLoaded) changeBall();
	function changeBall(){
		var ran = Math.floor(Math.random()*picsArr.length);
		var image = picsArr[ran];
		$('.bg').attr('src', image);

		if(bgIDArr[ran]==1){
			$(".change_tips,.btn_create").removeClass("white").addClass("black");
		}else{
			$(".change_tips,.btn_create").removeClass("black").addClass("white");
		}
	}

	$('.btn_create').click(function(){
		ggTrack('打造我的星球');
		window.location.replace('index.html');
		//window.location.href = 'index.html';
	});

	function ggTrack(gevent){
		gtag('event', gevent);
	}

</script>
<script type="text/javascript" src="js/share-jiaoai.js"></script>



